<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技术社区</title>
    <link rel="stylesheet" href="./static/element-plus/index.css">
    <script src="./static/js/vue.global.js"></script>
    <script src="./static/element-plus/index.full.js"></script>
    <style>
       .el-carousel-item img {
            width: 100%;
            height: 100%;
        }

       .el-footer.el-link {
            color: #666;
            margin: 0 5px;
        }

       /* 版权信息行样式 */
       .copyright-row {
            background-color: lightblue;
            color: white;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px 0;
        }

        /* 版权信息段落样式 */
       .copyright-row p {
            margin: 0;
            text-align: center;
            color: black;
        }

        /* 调整轮播组件的高度，可按需调整 */
       .el-carousel {
            height: 600px;
        }

       .product-item img {
            width: 100%;
            height: auto;
            max-width: 150px;
            max-height: 150px;
            margin: 0 auto;
            display: block;
        }

       .footer-contact p {
            margin: 0;
            line-height: 1.4;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="4" style="display: flex; align-items: center;">
                        <img src="./static/images/logo.png" style="height: 60px" />
                        <h2 style="padding-left: 4px">技术社区</h2>
                    </el-col>
                    <el-col :span="8">
                        <el-menu :default-active="activeIndex" mode="horizontal" style="border-bottom: none;">
                            <el-menu-item index="1">首页</el-menu-item>
                            <el-menu-item index="2">资讯</el-menu-item>
                            <el-menu-item index="3">课程</el-menu-item>
                            <el-menu-item index="4">商城</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="8" style="height: 60px; line-height: 60px;" class="hidden-xs-only">
                        <el-input placeholder="请输入关键字"></el-input>
                    </el-col>
                    <el-col :span="4" style="text-align: right; height: 60px; line-height: 60px;" class="hidden-xs-only">
                        <el-link type="primary" @click="goToLogin">登录</el-link>
                        <el-link type="primary" style="padding-left: 4px" @click="goToRegister">注册</el-link>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-main>
                    <el-row>
                        <el-col :xs="12" :sm="8" v-for="(product, i) in productList" :key="i" class="product-item">
                            <img :src="product.img" />
                            <p>{{ product.name }}</p>
                            <p>价格：{{ product.price }}  库存：{{ product.stock }}</p>
                            <el-button @click="addToCart(product)">加入购物车</el-button>
                        </el-col>
                    </el-row>
                </el-main>
                <el-aside>
                    <el-card>
                        <h2>购物车</h2>
                        <div v-if="cartItems.length > 0">
                            <div v-for="(item, i) in cartItems" :key="i">
                                {{ item.name }}
                                <el-input-number v-model="item.number" :min="0" :max="item.stock"
                                    @change="handleChange(item)"></el-input-number>
                                <el-divider style="margin: 10px 0;"></el-divider>
                            </div>

                        </div>
                        <div v-else>
                            <el-empty description="暂无商品"></el-empty>
                        </div>
                        <div>
                            <p>总价：{{ totalPrice }} 元</p>
                            <el-button type="primary" @click="checkout">结算</el-button>
                        </div>
                    </el-card>
                </el-aside>
            </el-container>
            <el-footer>
                <el-row>
                    <el-col :xs="24" :lg="8">
                        <div>
                            <img src="./static/images/logo.png" style="height: 100px" />
                        </div>
                        <div>
                            <h2>技术社区</h2>
                            <p>致力于构建一个专业的IT技术交流社区</p>
                        </div>
                    </el-col>
                    <el-col :xs="24" :lg="8">
                        <div>
                            <el-link type="primary">首页</el-link>
                            <el-link type="primary">资讯</el-link>
                            <el-link type="primary">课程</el-link>
                            <el-link type="primary">商城</el-link>
                        </div>
                        <div>
                            <el-link type="primary">关于我们</el-link>
                            <el-link type="primary">使用手册</el-link>
                            <el-link type="primary">隐私条款</el-link>
                            <el-link type="primary">建议反馈</el-link>
                        </div>
                    </el-col>
                    <el-col :xs="24" :lg="8" class="footer-contact">
                        <div>
                            <h2>联系我们</h2>
                            <p>电话：123456789</p>
                            <p>邮箱: software@develop.com</p>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="copyright-row">
                    <p>软件开发工作室版权所有</p>
                </el-row>
            </el-footer>
        </el-container>
    </div>
    <script>
        var App = {
            data() {
                return {
                    activeIndex: '4',
                    productList: [
                        { id: "1", type: '徽章', name: 'IT社区文创 ：「代码新秀闪耀」 荣誉徽章', price: 29, stock: 30, img: './static/images/product01.png' },
                        { id: "2", type: '帆布包', name: '【it社区文创】「极简主义」帆布包', price: 79, stock: 60, img: './static/images/product02.png' },
                        { id: "3", type: 'T恤', name: '蓝字魔法，解锁IT新风尚——百搭T恤衫', price: 12, stock: 100, img: './static/images/product03.png' },
                        { id: "4", type: 'U盘', name: 'IT达人必备：128GB紫色技术社区U盘', price: 39, stock: 80, img: './static/images/product04.png' },
                        { id: "5", type: '笔记本', name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 29, stock: 30, img: './static/images/product05.png' },
                        { id: "6", type: '鼠标垫', name: '文创字母鼠标垫「IT技术社区专属」', price: 79, stock: 60, img: './static/images/product06.png' },
                    ],
                    cartItems: [],
                };
            },
            computed: {
                totalPrice() {
                    return this.cartItems.reduce((total, item) => {
                        return total + item.price * item.number;
                    }, 0);
                }
            },
            methods: {
                addToCart(product) {
                    const cartItem = this.cartItems.find((item) => item.id === product.id);
                    if (cartItem) {
                        cartItem.number++;
                    } else {
                        this.cartItems.push({...product, number: 1 });
                    }
                },
                handleChange(item) {
                    if (item.number <= 0) {
                        this.removeFromCart(item);
                    }
                },
                removeFromCart(item) {
                    const index = this.cartItems.indexOf(item);
                    if (index > -1) {
                        this.cartItems.splice(index, 1);
                    }
                },
                checkout() {
                    console.log('进行结算操作');
                },
                goToLogin() {
                    window.location.href = "/login.html";
                },
                goToRegister() {
                    window.location.href = "/register.html";
                }
            }
        };
        Vue.createApp(App).use(ElementPlus).mount("#app");
    </script>
</body>

</html>    